<template>
  <div class="index-container">
    <div v-for="(item, i) in list" :key="i" class="type-card">
      <div class="type-card-name">{{ item.name }}</div>
      <div v-if="item.children" class="type-card-main">
        <div class="card-item" v-for="(c, j) in item.children" :key="j">
          <span class="card-item-title" @click="goPage(c)">
            {{ c.component?.__title || c.lib?.__title }}
          </span>
          <div class="chart-container" v-if="c.component">
            <component :is="c.component"></component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from "./list";

export default {
  data() {
    return {
      list
    };
  },
  methods: {
    goPage(item) {
      this.$router.push({
        name: "preview",
        query: { name: item.name, parent: item.parent }
      });
    }
  }
};
</script>
